<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>js翻页表格</title>
    <meta charset="utf-8" />
    <meta name="author" content="http://www.dreamload.cn" />
    <style>
        * {
            margin: 0;
            padding: 0;
            outline: 0;
        }

        body {
            font: 11px Verdana, Arial;
            margin: 25px;
            background: #fff url(../images/bg.gif) repeat-x;
        }

        #tablewrapper {
            width: 980px;
            margin: 0 auto;
        }

        #tableheader {
            height: 55px;
        }

        .search {
            float: left;
            padding: 6px;
            border: 1px solid #c6d5e1;
            background: #fff;
        }

        #tableheader select {
            float: left;
            font-size: 12px;
            width: 125px;
            padding: 2px 4px 4px;
        }

        #tableheader input {
            float: left;
            font-size: 12px;
            width: 225px;
            padding: 2px 4px 4px;
            margin-left: 4px;
        }

        .details {
            float: right;
            padding-top: 12px;
        }

        .details div {
            float: left;
            margin-left: 15px;
            font-size: 12px;
        }

        .tinytable {
            width: 979px;
            border-left: 1px solid #c6d5e1;
            border-top: 1px solid #c6d5e1;
            border-bottom: none;
        }

        .tinytable th {
            background: url(../images/header-bg.gif);
            text-align: left;
            color: #cfdce7;
            border: 1px solid #fff;
            border-right: none;
        }

        .tinytable th h3 {
            font-size: 10px;
            padding: 6px 8px 8px;
        }

        .tinytable td {
            padding: 4px 6px 6px;
            border-bottom: 1px solid #c6d5e1;
            border-right: 1px solid #c6d5e1;
        }

        .tinytable .head h3 {
            background: url(../images/sort.gif) 7px center no-repeat;
            cursor: pointer;
            padding-left: 18px;
        }

        .tinytable .desc, .sortable .asc {
            background: url(../images/header-selected-bg.gif);
        }

        .tinytable .desc h3 {
            background: url(../images/desc.gif) 7px center no-repeat;
            cursor: pointer;
            padding-left: 18px;
        }

        .tinytable .asc h3 {
            background: url(../images/asc.gif) 7px center no-repeat;
            cursor: pointer;
            padding-left: 18px;
        }

        .tinytable .head:hover, .tinytable .desc:hover, .tinytable .asc:hover {
            color: #fff;
        }

        .tinytable .evenrow td {
            background: #fff;
        }

        .tinytable .oddrow td {
            background: #ecf2f6;
        }

        .tinytable td.evenselected {
            background: #ecf2f6;
        }

        .tinytable td.oddselected {
            background: #dce6ee;
        }

        .tinytable tfoot {
            background: #fff;
            font-weight: bold;
        }

        .tinytable tfoot td {
            padding: 6px 8px 8px;
        }

        #tablefooter {
            height: 15px;
            margin-top: 20px;
        }

        #tablenav {
            float: left;
        }

        #tablenav img {
            cursor: pointer;
        }

        #tablenav div {
            float: left;
            margin-right: 15px;
        }

        #tablelocation {
            float: right;
            font-size: 12px;
        }

        #tablelocation select {
            margin-right: 3px;
        }

        #tablelocation div {
            float: left;
            margin-left: 15px;
        }

        .page {
            margin-top: 2px;
            font-style: italic;
        }

        #selectedrow td {
            background: #c6d5e1;
        }
    </style>
</head>
<body>
<div id="tablewrapper">
    <div id="tableheader">
        <div class="search">
            <select id="columns" onchange="sorter.search('query')"></select>
            <input type="text" id="query" placeholder="在这里搜索..." onkeyup="sorter.search('query')" />
        </div>
        <span class="details">
                <span>搜索日程：<span id="startrecord"></span>-<span id="endrecord"></span> 共 <span id="totalrecords"></span>条</span>
                <span><a href="javascript:sorter.reset()">重置</a></span>
            </span>
    </div>
    <table cellpadding="0" cellspacing="0" border="0" id="table" class="tinytable">
        <thead>
        <tr>
            <th class="nosort"><h3>序号</h3></th>
            <th><h3>姓名</h3></th>
            <th><h3>电话</h3></th>
            <th><h3>邮箱</h3></th>
            <th><h3>出生日期</h3></th>
            <th><h3>薪水</h3></th>
        </tr>
        </thead>
        <tbody>
        <tr>
            <td>1</td>
            <td>张友鹏</td>
            <td>(627) 536-4760</td>
            <td><a href="mailto:#">tortor@est.ca</a></td>
            <td>12/02/1962</td>
            <td>$73,229</td>
        </tr>
        <tr>
            <td>2</td>
            <td>闫杰</td>
            <td>(921) 943-5780</td>
            <td><a href="mailto:#">in@elementum.org</a></td>
            <td>06/03/1957</td>
            <td>$130,752</td>
        </tr>
        <tr>
            <td>3</td>
            <td>宝玉</td>
            <td>(835) 361-5993</td>
            <td><a href="mailto:#">arcu.ac@disse.ca</a></td>
            <td>10/15/1983</td>
            <td>$48,684</td>
        </tr>
        <tr>
            <td>4</td>
            <td>何明帅</td>
            <td>(605) 803-1561</td>
            <td><a href="mailto:#">at.risus.Nunc@ipsum.com</a></td>
            <td>07/30/1982</td>
            <td>$7,023</td>
        </tr>
        <tr>
            <td>5</td>
            <td>张姗</td>
            <td>(666) 569-9894</td>
            <td><a href="mailto:#">non@Proin.ca</a></td>
            <td>09/27/1986</td>
            <td>$69,875</td>
        </tr>
        <tr>
            <td>6</td>
            <td>华晨宇</td>
            <td>(771) 294-6690</td>
            <td><a href="mailto:#">Aenean.sed@elit.ca</a></td>
            <td>10/23/1970</td>
            <td>$113,763</td>
        </tr>
        <tr>
            <td>7</td>
            <td>李明依</td>
            <td>(851) 784-4129</td>
            <td><a href="mailto:#">nunc.nulla@vel.com</a></td>
            <td>12/22/1972</td>
            <td>$130,248</td>
        </tr>
        <tr>
            <td>8</td>
            <td>张一山</td>
            <td>(810) 652-6704</td>
            <td><a href="mailto:#">dis@duinec.ca</a></td>
            <td>10/26/1973</td>
            <td>$73,197</td>
        </tr>
        <tr>
            <td>9</td>
            <td>何明哲</td>
            <td>(850) 562-3177</td>
            <td><a href="mailto:#">elit@dolor.com</a></td>
            <td>07/20/1985</td>
            <td>$63,736</td>
        </tr>
        <tr>
            <td>10</td>
            <td>方可日</td>
            <td>(378) 371-0559</td>
            <td><a href="mailto:#">turpis.Nulla@ac.edu</a></td>
            <td>03/29/1970</td>
            <td>$2,868</td>
        </tr>
        <tr>
            <td>11</td>
            <td>斐东来</td>
            <td>(465) 520-1801</td>
            <td><a href="mailto:#">nunc.ac.mattis@enim.com</a></td>
            <td>08/10/1963</td>
            <td>$126,469</td>
        </tr>
        <tr>
            <td>12</td>
            <td>杨明</td>
            <td>(992) 962-9419</td>
            <td><a href="mailto:#">amet.ante@lentesque.edu</a></td>
            <td>08/12/1971</td>
            <td>$142,448</td>
        </tr>
        <tr>
            <td>13</td>
            <td>薛洋</td>
            <td>(585) 210-0390</td>
            <td><a href="mailto:#">eu@Integer.com</a></td>
            <td>07/11/1968</td>
            <td>$40,267</td>
        </tr>
        <tr>
            <td>14</td>
            <td>斩梦</td>
            <td>(489) 101-5447</td>
            <td><a href="mailto:#">rutrum.non.hendrerit@iaculis.org</a></td>
            <td>04/11/1970</td>
            <td>$99,686</td>
        </tr>
        <tr>
            <td>15</td>
            <td>周蕙</td>
            <td>(934) 692-7294</td>
            <td><a href="mailto:#">erat.in.conetuer@pedenout.org</a></td>
            <td>06/10/1957</td>
            <td>$112,997</td>
        </tr>
        <tr>
            <td>16</td>
            <td>李明达</td>
            <td>(806) 835-7035</td>
            <td><a href="mailto:#">vel.sapien@mi.ca</a></td>
            <td>02/09/1989</td>
            <td>$5,282</td>
        </tr>
        <tr>
            <td>17</td>
            <td>郭爱华</td>
            <td>(859) 974-4442</td>
            <td><a href="mailto:#">adipiscing.ligula@aretraNam.edu</a></td>
            <td>02/14/1990</td>
            <td>$103,999</td>
        </tr>
        <tr>
            <td>18</td>
            <td>苏灿</td>
            <td>(673) 147-0443</td>
            <td><a href="mailto:#">Cras@Vestibulumant.edu</a></td>
            <td>04/14/1981</td>
            <td>$37,014</td>
        </tr>
        <tr>
            <td>19</td>
            <td>张丽</td>
            <td>(340) 430-0424</td>
            <td><a href="mailto:#">tincidunt@vurmagna.com</a></td>
            <td>11/06/1959</td>
            <td>$104,149</td>
        </tr>
        <tr>
            <td>20</td>
            <td>郝文杰</td>
            <td>(291) 455-8520</td>
            <td><a href="mailto:#">massa.rutrum@Nullamlob.ca</a></td>
            <td>09/09/1970</td>
            <td>$31,090</td>
        </tr>
        <tr>
            <td>21</td>
            <td>李亚鹏</td>
            <td>(142) 520-1128</td>
            <td><a href="mailto:#">Etiam.laoreet@velit.org</a></td>
            <td>04/25/1971</td>
            <td>$44,641</td>
        </tr>
        <tr>
            <td>22</td>
            <td>何华</td>
            <td>(126) 374-6078</td>
            <td><a href="mailto:#">Integer.in.magna@ntumcollis.edu</a></td>
            <td>01/23/1984</td>
            <td>$46,450</td>
        </tr>
        <tr>
            <td>23</td>
            <td>史珍香</td>
            <td>(687) 483-9669</td>
            <td><a href="mailto:#">in@adipiscing.edu</a></td>
            <td>03/17/1977</td>
            <td>$51,754</td>
        </tr>
        <tr>
            <td>24</td>
            <td>蒋敬</td>
            <td>(422) 644-3488</td>
            <td><a href="mailto:#">nec.luctus@ornarefacilisis.com</a></td>
            <td>12/01/1981</td>
            <td>$46,672</td>
        </tr>
        <tr>
            <td>25</td>
            <td>党代表</td>
            <td>(438) 395-9392</td>
            <td><a href="mailto:#">nibh.vulputate@necelendnon.org</a></td>
            <td>07/01/1980</td>
            <td>$32,193</td>
        </tr>
        <tr>
            <td>26</td>
            <td>党振星</td>
            <td>(963) 652-2643</td>
            <td><a href="mailto:#">Sed.neque@Duis.org</a></td>
            <td>01/19/1986</td>
            <td>$96,995</td>
        </tr>
        <tr>
            <td>27</td>
            <td>马尚华</td>
            <td>(294) 644-5306</td>
            <td><a href="mailto:#">tempus.mauris@elempurus.com</a></td>
            <td>09/16/1988</td>
            <td>$47,510</td>
        </tr>
        <tr>
            <td>28</td>
            <td>偶吧</td>
            <td>(190) 189-1420</td>
            <td><a href="mailto:#">orci.quis@auctor.com</a></td>
            <td>08/03/1963</td>
            <td>$36,286</td>
        </tr>
        <tr>
            <td>29</td>
            <td>冷风</td>
            <td>(163) 780-6121</td>
            <td><a href="mailto:#">mauris.a@Sedcongueelit.edu</a></td>
            <td>03/08/1974</td>
            <td>$124,913</td>
        </tr>
        <tr>
            <td>30</td>
            <td>刘泌</td>
            <td>(304) 536-8850</td>
            <td><a href="mailto:#">pellentesque@laoreet.org</a></td>
            <td>08/16/1978</td>
            <td>$28,057</td>
        </tr>
        <tr>
            <td>31</td>
            <td>华凤杰</td>
            <td>(272) 171-5731</td>
            <td><a href="mailto:#">felis@Donecfeugiat.ca</a></td>
            <td>12/10/1988</td>
            <td>$100,959</td>
        </tr>
        <tr>
            <td>32</td>
            <td>郭友东</td>
            <td>(608) 893-4909</td>
            <td><a href="mailto:#">malesuada.fames@dui.edu</a></td>
            <td>07/23/1959</td>
            <td>$87,972</td>
        </tr>
        <tr>
            <td>33</td>
            <td>程大聪</td>
            <td>(937) 368-5946</td>
            <td><a href="mailto:#">sociis.natoque@myipsum.org</a></td>
            <td>09/13/1980</td>
            <td>$51,217</td>
        </tr>
        <tr>
            <td>34</td>
            <td>陈小胖</td>
            <td>(832) 581-6953</td>
            <td><a href="mailto:#">libero@Infaucibus.com</a></td>
            <td>04/19/1980</td>
            <td>$120,374</td>
        </tr>
        <tr>
            <td>35</td>
            <td>冯小刚</td>
            <td>(332) 888-8768</td>
            <td><a href="mailto:#">congue@Nuncut.com</a></td>
            <td>07/16/1974</td>
            <td>$95,173</td>
        </tr>
        <tr>
            <td>36</td>
            <td>李冰</td>
            <td>(961) 215-0426</td>
            <td><a href="mailto:#">pharetra@rutrumFusce.edu</a></td>
            <td>01/13/1962</td>
            <td>$140,552</td>
        </tr>
        <tr>
            <td>37</td>
            <td>罗梅</td>
            <td>(163) 580-2609</td>
            <td><a href="mailto:#">Integer.aliquam@Sedetlibero.org</a></td>
            <td>08/27/1967</td>
            <td>$37,762</td>
        </tr>
        <tr>
            <td>38</td>
            <td>张紫妍</td>
            <td>(976) 799-4111</td>
            <td><a href="mailto:#">Proin@Donecelementum.org</a></td>
            <td>01/02/1959</td>
            <td>$32,371</td>
        </tr>
        <tr>
            <td>39</td>
            <td>王爱武</td>
            <td>(798) 959-3321</td>
            <td><a href="mailto:#">eget.dictum.placerat@idlibero.ca</a></td>
            <td>11/27/1961</td>
            <td>$77,847</td>
        </tr>
        <tr>
            <td>40</td>
            <td>王家国</td>
            <td>(525) 353-2984</td>
            <td><a href="mailto:#">a@diamnunc.com</a></td>
            <td>10/02/1957</td>
            <td>$75,654</td>
        </tr>
        <tr>
            <td>41</td>
            <td>王烨</td>
            <td>(106) 260-1651</td>
            <td><a href="mailto:#">pulvinar@Duisvolutpat.org</a></td>
            <td>08/24/1964</td>
            <td>$11,498</td>
        </tr>
        <tr>
            <td>42</td>
            <td>欧阳</td>
            <td>(807) 487-5786</td>
            <td><a href="mailto:#">a@interdumlibero.ca</a></td>
            <td>10/10/1973</td>
            <td>$137,743</td>
        </tr>
        <tr>
            <td>43</td>
            <td>何萌</td>
            <td>(945) 481-7808</td>
            <td><a href="mailto:#">laoreet.posuere@vallis.com</a></td>
            <td>08/19/1962</td>
            <td>$64,799</td>
        </tr>
        <tr>
            <td>44</td>
            <td>臧亚盟</td>
            <td>(844) 314-8683</td>
            <td><a href="mailto:#">fames@gravida.edu</a></td>
            <td>12/01/1966</td>
            <td>$99,927</td>
        </tr>
        <tr>
            <td>45</td>
            <td>刘妍杰</td>
            <td>(814) 509-0367</td>
            <td><a href="mailto:#">Cras.vulputate.velit@acusUt.com</a></td>
            <td>10/23/1981</td>
            <td>$36,618</td>
        </tr>
        <tr>
            <td>46</td>
            <td>郑爱华</td>
            <td>(955) 748-1014</td>
            <td><a href="mailto:#">fringilla@id.edu</a></td>
            <td>10/29/1980</td>
            <td>$19,325</td>
        </tr>
        <tr>
            <td>47</td>
            <td>冯晓</td>
            <td>(107) 247-3380</td>
            <td><a href="mailto:#">pellentesque@pedeultri.com</a></td>
            <td>06/11/1963</td>
            <td>$109,433</td>
        </tr>
        <tr>
            <td>48</td>
            <td>肖晓萧</td>
            <td>(395) 200-9188</td>
            <td><a href="mailto:#">ac@Quisque.edu</a></td>
            <td>08/04/1976</td>
            <td>$3,246</td>
        </tr>
        <tr>
            <td>49</td>
            <td>邓珍</td>
            <td>(259) 659-7498</td>
            <td><a href="mailto:#">tincidunt.vehicula@ura.com</a></td>
            <td>12/31/1961</td>
            <td>$67,319</td>
        </tr>
        </tbody>
    </table>
    <div id="tablefooter">
        <div id="tablenav">
            <div>
                <img src="../images/first.gif" width="16" height="16" alt="首页" onclick="sorter.move(-1,true)" />
                <img src="../images/previous.gif" width="16" height="16" alt="上一页" onclick="sorter.move(-1)" />
                <img src="../images/next.gif" width="16" height="16" alt="下一页" onclick="sorter.move(1)" />
                <img src="../images/last.gif" width="16" height="16" alt="尾页" onclick="sorter.move(1,true)" />
            </div>
            <div>
                <select id="pagedropdown"></select>
            </div>
            <div>
                <a href="javascript:sorter.showall()">显示全部</a>
            </div>
        </div>
        <div id="tablelocation">
            <div>
                <span>每页显示</span>
                <select onchange="sorter.size(this.value)">
                    <option value="5">5</option>
                    <option value="10" selected="selected">10</option>
                    <option value="20">20</option>
                    <option value="50">50</option>
                    <option value="100">100</option>
                </select>
                <span>条</span>
            </div>
            <div class="page">共 <span id="currentpage"></span> 到 <span id="totalpages"></span>页</div>
        </div>
    </div>
</div>
<script type="text/javascript" src="../js/tablepageturning.js"></script>
<script type="text/javascript">
    var sorter = new TINY.table.sorter('sorter', 'table', {
        headclass: 'head',
        ascclass: 'asc',
        descclass: 'desc',
        evenclass: 'evenrow',
        oddclass: 'oddrow',
        evenselclass: 'evenselected',
        oddselclass: 'oddselected',
        paginate: true,
        size: 10,
        colddid: 'columns',
        currentid: 'currentpage',
        totalid: 'totalpages',
        startingrecid: 'startrecord',
        endingrecid: 'endrecord',
        totalrecid: 'totalrecords',
        hoverid: 'selectedrow',
        pageddid: 'pagedropdown',
        navid: 'tablenav',
        sortcolumn: 1,
        sortdir: 1,
        sum: [8],
        avg: [6, 7, 8, 9],
        columns: [{ index: 7, format: '%', decimals: 1 }, { index: 8, format: '$', decimals: 0 }],
        init: true
    });
</script>
</body>
</html>
